<template>
    <view class="follow">
        <u-sticky bgColor="#fff">
            <u-tabs :list="tabsList" lineColor="#966BFF" :current="state.current" @change="changeTabs"></u-tabs>
        </u-sticky>
        <block v-if="state.current === 0 && followUserList.length != 0">
            <view class="search">
                <u-search placeholder="搜索备注、昵称..." animation></u-search>
            </view>
            <UserLabel v-for="item in followUserList" :item="item" radius="50" @clickUnfollow="clickUnfollow"></UserLabel>
        </block>
        <block v-if="state.current === 1">
            <UserLabel v-for="item in neighborList" :item="item" radius="10" @clickUnfollow="clickUnfollow"></UserLabel>
        </block>
        <block v-if="state.current === 2">
            <UserLabel v-for="item in communityList" :item="item" width="148rpx" radius="10" textDecoration="false" @clickUnfollow="clickUnfollow"></UserLabel>
        </block>
        <UnfollowPopup :popup="state.popup" @closePopup="closePopup"></UnfollowPopup>
        <NullMsg v-if="followUserList.length == 0 && state.current === 0" text="暂无关注"></NullMsg>
    </view>
</template>

<script lang="ts" setup>
import { ref,reactive } from 'vue';

import NullMsg from '../components/NullMsg/index.vue';
import UserLabel from '../components/UserLabel/index.vue';
import UnfollowPopup from '../components/UnfollowPopup/index.vue';

const tabsList = ([
    { name: '关注的人' },
    { name: '话题' },
    { name: '社区' },
]);

const followUserList = reactive([
    { name: '读你', signature: '雨夜无眠' },
    { name: '读你', signature: '雨夜无眠' }
])

const neighborList = reactive([
    { name: '新邻居圈', num: '1680篇内容' },
    { name: '宠物圈', num: '1680篇内容' }
])

const communityList = reactive([
    { name: '春波小区', address: '滨江区春波路646号', num: '166人已关注' },
    { name: '春波小区', address: '滨江区春波路646号', num: '166人已关注' }
])

const state = ref({
    current: 0,
    popup: false
})

const changeTabs = ({ index }: { index: number }) => {
    state.value.current = index;
}

const clickUnfollow = () => {
    state.value.popup = true
}
const closePopup = () => {
    state.value.popup = false
}
</script>

<style lang="scss" scoped>
.follow {
    .search {
        padding: 20rpx;
        font-size: 25rpx;
    }

    
}</style>